<template>
  <div class="m-2 mr-0 overflow-hidden bg-white">
    <BasicTree
title="设备列表" treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" :clickRowToExpand="false"
      :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" :loading="loadingRef" />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getClassifyTree } from '@/api/collection/classify';
import { BasicTree, TreeItem } from '@/components/Tree';
import { getDeviceTree } from '@/api/collection/device';

defineOptions({ name: 'DataTree' });

const emit = defineEmits(['select']);

const treeData = ref<TreeItem[]>([]);
const loadingRef = ref(false)

async function fetch() {
  loadingRef.value = true
  treeData.value = (await getDeviceTree({})) as unknown as TreeItem[];
  loadingRef.value = false
  // console.log(treeData.value);
  emit('select', { id: treeData.value[0].id, type: treeData.value[0].type })
}

function handleSelect(keys, item) {
  emit('select', { id: item.selectedNodes[0].id, type: item.selectedNodes[0].type });
}

onMounted(() => {
  fetch();
});
</script>
